Dark Editor CSS

ページ背景も含めて黒いテーマが欲しいというtweetと、それを受けてのOSXのカラー反転機能を使うと画面を黒くできるという話を見て、作ってみた

これをUserCSSに設定すると
.page, .page a, .page video, .page iframe,
.code-block-start, .code-block-start span {
filter: invert(100%);
}
.line {
font-weight: 600;
}
CSS filterのinvertによって色が100%反転し、エディタの中が黒くなる
しかし画像やビデオは元のままの色が保たれる
100%反転をもう一度かけて、元に戻している為

settingsに設定してみた shokai (2018/2/3)

黒系テーマ
projectのテーマをHacker等の黒系にすると
ナビゲーションバー、関連ページリスト、エディタ外の背景色が黒っぽくなる
しかし、エディタの中は黒くならない
なぜか？
エディタの背景色を黒にすると、他にも色々な色を設定し直す必要がある
文字色・リンク色
青リンクは存在するページ、赤リンクは空ページへのリンクという意味がある
コードブロック記法のシンタックスハイライトの色
別のCSSファイルになっていて、切り替えがめんどくさい
エディタ内に現れるGUI部品の色が白背景を前提に作られている
たぶん他にもある
黒いエディタに合わせて、色を再設定する部分が予想以上に多かった
スタイル上書きするDOM要素が多い
今後の機能追加で知らない間に壊れてたりするようになる
ようするに、めんどくさい


OSXのカラー反転機能
黒背景にできるんだけど、画像も色が反転してしまう
人間の顔が青くなり、髪が白くなる
アイコン記法がすごい事になる
すごい事になるのだが、スクリーンキャプチャしても元の色で保存されるので様子を見せる事ができない
Macの システム環境設定 → アクセシビリティ → ディスプレイ → カラーを反転 で試してみてほしい


CSS filterでカラー反転すると
なかなか良い shokai
要素を指定して、 filter: invert(100%); で色を反転できる
全ての色が反転すれば、リンク記法の補完やコードブロック記法などを細かく色指定しなくても読める色になる
Scrapboxのリンクは青リンクが存在するページ、赤リンクが空ページ、という意味がある
色反転すると意味が逆になってしまう
<a> タグにはさらにもう一度 filter: invert(100%); をかけて元に戻す
画像
こちらも filter: invert(100%); をもう一度かけて元に戻したいのだが
<img> は今のところ全て <a> で囲まれているので、元に戻っている。やらなくていい。
ビデオ
<iframe> や <video> には <a> がついていないので、 filter: invert(100%); で反転する


これでUIも色反転される


Hacker系以外のテーマの場合
関連ページ部分が白いカードに黒文字になっている
このセレクタも追加すると、関連ページ部分の色を反転できる
.related-page-list, .related-page-list img, .related-page-list .link


なお、今後Scrapbox本体のHacker系テーマが更新されて、エディタ内が黒くなる場合があるかもしれない
その場合は、このUserCSSによって逆にエディタが白くなってしまう
そうなったらUserCSSから削除してください shokai

Related